<template>
    <div v-if="choose">
        <!-- 这里其实可以拆分成一个组件 -->
    <div v-for="(v,k) in dataList" :key="k" @click="change">
     <Row>
         <i-col span="7">
            <img :src="v.src" alt="" srcset="" width="100">
        </i-col>
        <i-col span="17">
            <router-link :to="{path:'/home/detail',query:{id:v.author}}">
                <h3>{{v.title}}</h3>
            </router-link>

            <h4>{{v.des}}</h4>
            <h5>作者：{{v.author}}</h5>
        </i-col>
          {{msg}}
     </Row>
   </div>  
   <div>
 <i-button type="success" long @click="touch">点击加载更多</i-button>
   </div>
    
    </div>
 
</template>

<script>
export default {
    data() {
        return {
            msg:"我是news组件",
            dataList:"",
            choose:true
        };
    },
    created() {
        this.getListDate()
    },
    methods: {
        getListDate(){   //封装异步             
            this.$http.get("../../../static/newslist.json").then(res=>{
            // this.$axios("../../../static/newslist.json").then(res=>{
            console.log(res.data)
            this.dataList=res.data;
            this.dataList.splice(4,9)
            // console.log(this.dataList[0].name)
        
        })  
        },
        change(){
            // alert(111)
            this.choose = false
        },
        touch(){
              this.$http.get("../../../static/newslist.json").then(res=>{
            // this.$axios("../../../static/newslist.json").then(res=>{
            console.log(res.data)
            this.dataList=res.data;
           this.dataList = this.dataList.concat(res.data)
            // console.log(this.dataList[0].name)
        
        })  
        }
    },
    components: {

    },
};
</script>

<style>
.ivu-row{
    border:1px solid;
    border-left-color: aliceblue;
    border-right-color: aliceblue;
    margin-top: 5px
}
</style>
